<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			*{		/* 初始化所有标签 */
				margin:0;
				padding:0;
			}
			 bigbox{
				 width:800px;
				 height:300px;
			 }
			.box1{
				width:200px;
				height:200px;
				border:1px solid red;
				font-size:36px;
				text-align:center;
				float:right;
				margin-right:10px;
			}
			.box2{
				width:300px;
				height:300px;
				background-color:pink;
			}
			.clear{
				 clear:both;
			 }
			/* fu{
				overflow:hidden;
			} */
			/* 3.添加after伪元素 */
			 clearfix::after{	/* 在......之后 */
			 content:"";	/* 内容为空 */
			 display:block;		/*转为块元素 */
			 height: 0;
			 clear: both;	/* 清除两端浮动 */
			 visibility: hidden;	/* 显示状态：隐藏 */
			}
			/* 4.添加双伪元素 */
			 .clearfix::before,.clearfix::after{
				 content:"";
				 display: table;
			}
			.clearfix::after{
				clear: both;
			}	
		</style>
	</head>
	<body>
		<!--传统的网页布局：标准流（元素的显示模式）+浮动 + 定位 -->
		<!--浮动float：让块元素一行内显示
		 float:left;左浮动，盒子从左往右摆放
		 float：right:右浮动，盒子从右往左摆放
		 float:none:不浮动，默认值
		 1.浮动元素会脱标（脱离标准流）
		 清除浮动方法：
		 1额外标签法：隔墙法
		 2.给父盒子添加overflow:hidden;
		 3.给父元素添加after伪元素
		 4.给父元素添加双伪元素
		 -->
		<!-- 网页布局第一准测：多个块级元素纵向排列找标准流，多个块级元素排列找浮动
		标准流+浮动布局策略： -->
		<!-- 
		快速创建标签：
		1.直接创建标签：标签名 * 个数 >tab键
		2.创建带有类名的标签：标签.类名*个数 >tab键	p.font*10
		3.创建带有类名的div:类名*个数 >tab键 
		-->
		<div class="clearfix">
		<div class="box">1</div>
		<div class="box"style="height:300px;">2</div>
		<div class="box">3</div>
		<!-- <div class="clear"></div> -->
		</div>
	</body>
</html>
